<template>
    <Card :bordered="false" dis-hover class="ivu-mt">
        <Row>
            <Col :xl="{span: 12, offset: 6}" :lg="{span: 12, offset: 6}" :md="{span: 16, offset: 4}"
                 :sm="{span: 20, offset: 2}" :xs="24">
                <Form ref="form" :model="data" :rules="rules" class="ivu-mt" :label-width="labelWidth"
                      :label-position="labelPosition">
                    <FormItem label="出发城市：" prop="startCity" label-for="startCity">
                        <Input v-model="data.startCity" placeholder="出发城市（必填）" element-id="startCity"/>
                    </FormItem>
                    <FormItem label="目的城市：" prop="endCity" label-for="endCity">
                        <Input v-model="data.endCity" placeholder="目的城市（必填）" element-id="endCity"/>
                    </FormItem>
                    <FormItem label="同行人：" prop="plaver" label-for="carAddress">
                        <Input v-model="data.plaver" placeholder="同行人（没同行人请填：无）" element-id="plaver"/>
                    </FormItem>
                    <FormItem label="出差原因：" prop="leaveReson" label-for="leaveReson">
                        <Input type="textarea" :rows="4" v-model="data.leaveReson" placeholder="请输入请假原因"
                               element-id="leaveReson"/>
                    </FormItem>
                    <FormItem label="开始时间：" prop="startTime" label-for="startTime">
                        <Date-picker v-model="data.startTime"
                                     format="yyyy-MM-dd HH:mm:ss"
                                     type="datetime" placeholder="开始日期" style="width: 200px"></Date-picker>
                    </FormItem>
                    <FormItem label="结束时间：" prop="endTime" label-for="endTime">
                        <Date-picker
                                v-model="data.endTime"
                                format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="结束日期"
                                style="width: 200px"></Date-picker>
                    </FormItem>
                    <FormItem>
                        <Button class="ivu-ml" @click="handleReset(data)">取消</Button>
                        <Button class="ivu-ml" type="primary" :loading="loading" @click="handleSubmit">确定</Button>
                    </FormItem>

                </Form>
            </Col>
        </Row>
    </Card>

</template>

<script>
    import Vacation from "@/api/Vacation";

    export default {
        data() {
            return {
                trafficType: '',
                formItem: {
                    checkbox: [],
                },
                data: {
                    startCity: '',
                    endCity: '',
                    plaver: '',
                    leaveReson: '',
                    startTime: '',
                    endTime: '',
                },
                loading: false,
                rules: {
                    startCity: [
                        {required: true, message: '出发城市', trigger: 'blur'}
                    ],
                    endCity: [
                        {required: true, message: '目的城市', trigger: 'blur'}
                    ],
                    plaver: [
                        {required: true, message: '请假原因', trigger: 'blur'}
                    ],
                    leaveReson: [
                        {required: true, message: '出差原因', trigger: 'blur'}
                    ],
                    startTime: [
                        {required: true, type: 'date', message: '开始时间（必填', trigger: 'change'}
                    ],
                    endTime: [
                        {required: true, type: 'date', message: '结束时间（必填', trigger: 'change'}
                    ]
                },
            }
        },
        computed: {
            labelWidth() {
                return this.isMobile ? undefined : 140;
            },
            labelPosition() {
                return this.isMobile ? 'top' : 'left';
            }
        },
        created() {
            let baseData = this.$route.params.item;
            let myIndex = this.$route.params.myIndex;
            console.log(myIndex);
            //是否编辑渲染
            if (myIndex) {
                this.data.contractId = baseData.positionName;
                this.data.mechanismOwner = baseData.mechanismOwner;

            }
        },
        methods: {


// T和Z时间转换
            changeDate(oldDate) {
                var dateee = new Date(oldDate).toJSON();//这个ie不兼容，会返回1970年的时间
                var date = new Date(+new Date(dateee) + 8 * 3600 * 1000)
                    .toISOString()
                    .replace(/T/g, " ")
                    .replace(/\.[\d]{3}Z/, "");
                return date;
            },

            //新增
            handleSubmit() {
                let newData = this.changeDate(this.data.startTime)
                console.log(newData);
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        this.loading = true;
                        Vacation.addVacation({
                            // status: 1 //审核状态（1：通过，2：未审核
                            vacationType: 3, //出勤休假类型（1：请假，2：加班，3：出差）
                            startCity: this.data.startCity,
                            endCity: this.data.endCity,
                            plaver: this.data.plaver,
                            leaveReson: this.data.leaveReson,
                            userId:this.$store.state.admin.user.info.userId,
                            nickName:this.$store.state.admin.user.info.nickName,
                            startTime: this.changeDate(this.data.startTime),
                            endTime: this.changeDate(this.data.endTime),
                        })
                            .then(res => {
                                // 返回数据
                                this.loading = false;
                                this.$Message.success('新增成功');
                                this.$router.push('/vacation/business')
                            })
                            .catch(err => {
                                // 异常情况

                            })
                    } else {
                        this.loading = false;
                    }
                });
            },
            // 新增数据
            handleCreate() {
                this.$refs.create.validate((valid) => {
                    if (valid) {
                        if (this.updateIndex < 0) {
                            // 新建
                            const mockData = this.mockOneData();
                            mockData.desc = this.createData.desc;
                            mockData.date = new Date();
                            this.list.splice(0, 0, mockData);
                            this.$Message.success('创建成功');
                        } else {
                            // 修改
                            const updateItemName = this.dataWithPage[this.updateIndex].name;
                            const updateItemIndex = this.list.findIndex(item => item.name === updateItemName);
                            this.list[updateItemIndex].desc = this.createData.desc;
                            this.$Message.success('修改成功');
                        }

                        this.showCreate = false;
                        this.creating = false;
                        this.$nextTick(() => {
                            this.creating = true;
                        });
                    } else {
                        this.creating = false;
                        this.$nextTick(() => {
                            this.creating = true;
                        });
                    }
                });
            },
            //取消
            handleReset(name) {
                this.$router.push('/vacation/business')
            },

        }

    }
</script>

<style scoped>

</style>
